$(function () {
        var form = layui.form
        var layer = layui.layer
        // 渲染列表
        link_list()
        function link_list() {
            $.ajax({
                method: 'GET',
                url: '/admin/links',
                async: false,  
                cache: false,  
                contentType: false,  
                processData: false,
                success: function (res) {
                    if (res.status !== 0) return layer.msg('获取列表失败！');
                    var strHTML = template('link_list', res)
                    $('tbody').html(strHTML)
                    renderAvatar(res.data)
                }
            })
    }


    var index = ''
    function renderAvatar(pic) {
        pic.forEach((item, index, arr) => {
            index = item
            // console.log(index.linkicon);
            // $('.bg img').attr('src',index.linkicon);
        })
    }


    // 添加链接事件
    var indexAdd = null
    // 添加分类点击事件
    $('#add_link').on('click', function () {
         indexAdd = layer.open({
            type: 1,
            title: '添加文章分类',
            area: ['500px', '350px'],
            content: $('#add-form-tpl').html(),
             //这里content是一个普通的String
        })
    })

    // 绑定头像上传按钮 
    var file = null
    $('body').on('click', '#urlIcon',function (e) {
        $('#linkFile').click();
        file = e.target.files
    })


    // 点击提交事件
    $('body').on('submit', '#add-form', function (e) {
        e.preventDefault()

        var form = new FormData($('#add-form')[0])
        console.log(form);
        $.ajax({
            method: 'POST',
            url: '/admin/links',
            data: form,
            processData: false,
            contentType: false,
            success: function (res) {
                if(res.status !== 0) return layer.msg('提交失败')
                layer.msg('提交成功')
                // 调用渲染页面
                link_list()
                // 关闭窗口
                layer.close(indexAdd)
            },
        })
        //  重置按钮点击事件
        $('[type="reset"]').on('click', function () {
            $('#add-form')[0].reset()
        })
    })


    // 根据ID查询友情链接详情
    function checkData(id) {
        // var id = $(this).attr('data-id')
        $.ajax({
            method: 'GET',
            url: '/admin/links/'+ id,
            success: function (res) {
                if (res.status !== 0) return layer.msg('查询信息失败！')
                // 为编辑弹出的模板渲染原值
                var data = res.data
                console.log(data.linkname);
                // $('#edit-form [name=id]').html(data.id)
                // $('#edit-form [name=linkname]').html(data.linkname)
                // $('#edit-form [name="linkurl"]').html(data.linkurl)
                // $('#edit-form [name="linkdesc"]').html(data.linkdesc)
                form.val('editForm',data)
            }
        })
    }


    //  删除按钮绑定事件
    $('body').on('click', '.delete', function (e) {
        // 获取当前事件源的id
        var id = $(this).attr('data-id')
        layer.confirm('是否删除?', {icon: 3, title:'提示'}, function(index){
            $.ajax({
                method: 'DELETE',
                url: '/admin/links/' + id,
                success: function (res) {
                    if (res.status !== 0) return layer.msg('删除失败！')
                    link_list()
                }
            })
            layer.close(index);
          });
    })

    var indexEdit = null;
    // 编辑按钮事件
    $('body').on('click', '.edit', function () {
        var id = $(this).attr('data-id');
        // console.log(id);
        // 调用查询详情将数据渲染到编辑页面
        checkData(id)

        indexEdit = layer.open({
            type: 1,
            title: '添加文章分类',
            area: ['500px', '350px'],
            content: $('#edit-form-tpl').html(),
             //这里content是一个普通的String
        })

        $('#edit-form').on('submit', function (e) {
            e.preventDefault()

            var form = new FormData($('#edit-form')[0])
            console.log(form);
            $.ajax({
                method: 'PUT',
                url: '/admin/links/'+id,
                data: form,
                processData: false,
                contentType: false,
                success: function (res) {
                    console.log(10);
                    if(res.status !== 0) return layer.msg('更新失败')
                    layer.msg('更新成功')
                    // 调用渲染页面
                    link_list()
                    // 关闭窗口
                    layer.close(indexEdit)
                },
            })    
        })
    })
    })
    